<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Photo Album</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style media="screen">
      .container {
        min-width: 500px;
        min-height: 500px
      }
      .photolist {
        height: 200px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transition: all 0.6s;
      }
      .photolist:hover{
        transform: scale(1.4);
        z-index:1;
      }
      .img-thumbnail,
      .d-block {
        width:100%;
        height:100%;

      }
      .photolist > button {
        position: absolute;
        top: 10px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container border border-primary">
      <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><h3>相册首页</h3></a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><h3>关于相册</h3></a>
          <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"><h3>关于作者</h3></a>
        </div>
      </nav>
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
          <div class="row">
            <div class="col-6 col-md-4 border-right border-primary">
              <button type="button" class="btn btn-success" onclick="createAlbum()">创建相册</button>
              <div class="list-group" id="albumlist" role="tablist">
                <% albumList.forEach(album=>{ %>
                <% if(album.active){ %>
                  <a class="list-group-item list-group-item-action show active" id="album-<%= album.albumName%>" onclick="changeAlbum(event)">
                <% }else{ %>
                  <a class="list-group-item list-group-item-action" id="album-<%= album.albumName%>" onclick="changeAlbum(event)">
                <% } %>
                    <span><%= album.albumName%></span>
                    <button type="button" class="close" onclick="deleteAlbum(this)">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </a>
                <%})%>
              </div>
            </div>
            <div class="col-6 col-md-8">
              <input type="file" class="btn btn-success" id="uploadImg" style="width:85%" onchange="createReader(readImage)(event)">
              <div style="min-height: 400px">
                <% photoList.forEach(photo=>{ %>
                  <div class="col-10 col-md-5 photolist">
                    <img class="img-thumbnail" id="<%= photo.id%>" src="<%= photo.imgSrc%>">
                    <button type="button" class="close" onclick="deleteImage(this)">
                      <span aria-hidden="true">&times;</span>
                  </div>
                <%})%>
              </div>
              <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                  <% if(maxPage === 0 || page === 1){ %>
                  <li class="page-item disabled">
                  <% }else{ %>
                  <li class="page-item">
                  <% } %>
                    <a class="page-link" href="/?page=<%= page-1 %>" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>
                  <% if(maxPage === 0 || maxPage === 1){ %>
                  <li class="page-item"><a class="page-link" href="/?page=1">1</a></li>
                  <% }else if(maxPage === 2){ %>
                  <li class="page-item"><a class="page-link" href="/?page=1">1</a></li>
                  <li class="page-item"><a class="page-link" href="/?page=2">2</a></li>
                  <% }else if(page === 1){ %>
                  <li class="page-item"><a class="page-link" href="/?page=1">1</a></li>
                  <li class="page-item"><a class="page-link" href="/?page=2">2</a></li>
                  <li class="page-item"><a class="page-link" href="/?page=3">3</a></li>
                  <% }else if(page === maxPage){ %>
                  <li class="page-item"><a class="page-link" href="/?page=<%= maxPage-2 %>"><%= maxPage-2 %></a></li>
                  <li class="page-item"><a class="page-link" href="/?page=<%= maxPage-1 %>"><%= maxPage-1 %></a></li>
                  <li class="page-item"><a class="page-link" href="/?page=<%= maxPage %>"><%= maxPage %></a></li>
                  <% }else{ %>
                  <li class="page-item"><a class="page-link" href="/?page=<%= page-1 %>"><%= page-1 %></a></li>
                  <li class="page-item"><a class="page-link" href="/?page=<%= page %>"><%= page %></a></li>
                  <li class="page-item"><a class="page-link" href="/?page=<%= page+1 %>"><%= page+1 %></a></li>
                  <% } %>
                  <% if(maxPage > 3){ %>
                  <li class="page-item"><a class="page-link" href="#">...</a></li>
                  <li class="page-item"><a class="page-link" href="/?page=<%= maxPage %>"><%= maxPage %></a></li>
                  <% } %>
                  <% if(maxPage === 0 || page === maxPage){ %>
                  <li class="page-item disabled">
                  <% }else{ %>
                  <li class="page-item">
                  <% } %>
                    <a class="page-link" href="/?page=<%= page+1 %>" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                   <div class="modal-content">
                     <div id="carousel" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner"  style="min-width: 500px;min-height: 500px;">
                         <% allPhotos.forEach(photo=>{ %>
                         <div class="carousel-item" name="<%= photo.id%>">
                           <img class="d-block w-100" src="<%= photo.imgSrc%>">
                         </div>
                         <%})%>
                       </div>
                       <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                         <span class="sr-only">Previous</span>
                       </a>
                       <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
                         <span class="sr-only">Next</span>
                       </a>
                     </div>

                   </div>
                </div>
             </div>
        </div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
          <div class="jumbotron">
            <h1 class="display-4">随心相册</h1>
            <p class="lead">————随心所欲，尽情分享。</p>
            <hr class="my-4">
            <div>
              <h3>相册功能：</h3>
              <p>1.创建空相册；</p>
              <p>2.在选定相册内添加和删除图片；</p>
              <p>3.随页码显示图片，每页显示四幅图片；</p>
              <p>4.可在不同相册间切换并显示第一页图片；</p>
              <p>5.移至图片处，图片放大显示；</p>
              <p>6.单击图片可逐次轮播该相册图片。</p>
            </div>
            <hr class="my-4">
            <div>
              <h3>所用框架：</h3>
              <p>客户端通过jQuery和bootstrap构建；</p>
              <p>服务器端由express框架搭建；</p>
              <p>相册数据由mongodb数据库进行存储。</p>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
          <div class="card text-center">
            <img class="card-img-top" src="images/mesboard.jpg">
            <div class="card-body">
              <h3 class="card-title">随心相册</h3>
              <p class="card-text">作者：qmbryi</p>
              <p class="card-text">日期：2018-11-14</p>
              <a href="https://gitee.com/liulishu/week11.git" class="btn btn-primary">Go gitee</a>
            </div>
          </div>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <!-- <script src="https://code.jquery.com/jquery-3.2.1.js"></script> -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="javascripts/album.js"></script>
    </div>
  </body>
</html>
